<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    showFooter
    :title="!unref(isUpdateRef) ? '新增菜单' : '编辑菜单'"
    width="45%"
    @ok="handleSubmit"
  >
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import { BasicForm, useForm, FormSchema } from '@/components/Form';
  import { BasicModal, useModal } from '@/components/Modal';

  import { getMenuList } from '@/api/demo/system';

  import menuApi from '@/api/authority/menuApi';

  // 自定义组件名称, 默认为文件名
  defineOptions({ name: 'MenuModal' });

  // 定义父组件回调方法
  const emit = defineEmits(['success']);

  // 定义对外暴露方法
  defineExpose({ open });

  // 新增还是更新
  const isUpdateRef = ref(true);

  // 表单绑定 model
  const formModel = ref<any>({});

  // 自定义方法: 判断菜单类型
  const isDir = (type: string) => type === '0';
  const isMenu = (type: string) => type === '1';
  const isButton = (type: string) => type === '2';

  // 表单列
  const formSchema: FormSchema[] = [
    {
      field: 'parentId',
      label: '上级菜单',
      component: 'TreeSelect',
      componentProps: {
        fieldNames: {
          label: 'showName',
          key: 'id',
          value: 'id',
        },
        getPopupContainer: () => document.body,
      },
    },

    {
      field: 'showName',
      label: '显示名称',
      component: 'Input',
      required: true,
    },
    {
      field: 'menuName',
      label: '唯一名称',
      component: 'Input',
      required: true,
      componentProps: {
        placeholder: '全英文，不能有空格',
      },
    },

    {
      field: 'orderNum',
      label: '显示顺序',
      component: 'InputNumber',
      required: true,
    },
    {
      field: 'icon',
      label: '图标',
      component: 'IconPicker',
      required: true,
    },
    {
      field: 'perms',
      label: '权限标识',
      component: 'Input',
      componentProps: {
        placeholder: '命名规则: 父目录:[多级目录:]当前目录',
      },
    },
    {
      field: 'params',
      label: '路由参数',
      component: 'Input',
      componentProps: {
        placeholder: '命名规则: 父目录:[多级目录:]当前目录',
      },
    },
    {
      field: 'menuType',
      label: '菜单类型',
      component: 'RadioButtonGroup',
      defaultValue: '0',
      componentProps: {
        size: 'small',
        options: [
          { label: '目录', value: '0' },
          { label: '菜单', value: '1' },
          { label: '按钮', value: '2' },
        ],
      },
      colProps: { lg: 24, md: 24 },
    },

    {
      field: 'routePath',
      label: '路由地址',
      component: 'Input',
      required: true,
      componentProps: {
        placeholder: '外链地址以http://开头',
      },
      ifShow: ({ values }) => !isButton(values.menuType),
    },
    {
      field: 'cmpPath',
      label: '组件路径',
      component: 'Input',
      ifShow: ({ values }) => isMenu(values.menuType),
    },

    {
      field: 'extLink',
      label: '是否外链',
      component: 'RadioGroup',
      defaultValue: '0',
      componentProps: {
        options: [
          { label: '否', value: '0' },
          { label: '是', value: '1' },
        ],
      },
      ifShow: ({ values }) => !isButton(values.menuType),
    },

    {
      field: 'openType',
      label: '打开方式',
      component: 'RadioGroup',
      defaultValue: '0',
      componentProps: {
        options: [
          { label: '页签', value: '0' },
          { label: '新窗口', value: '1' },
        ],
      },
      ifShow: ({ values }) => isMenu(values.menuType),
    },

    {
      field: 'visible',
      label: '是否显示',
      component: 'RadioGroup',
      defaultValue: '0',
      componentProps: {
        options: [
          { label: '是', value: '0' },
          { label: '否', value: '1' },
        ],
      },
      ifShow: ({ values }) => !isButton(values.menuType),
    },
    {
      field: 'status',
      label: '启用状态',
      component: 'RadioGroup',
      defaultValue: '0',
      componentProps: {
        options: [
          { label: '启用', value: '0' },
          { label: '禁用', value: '1' },
        ],
      },
    },
  ];

  // 注册表单
  const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
    labelWidth: 100,
    schemas: formSchema,
    showActionButtonGroup: false,
    baseColProps: { lg: 12, md: 24 },
    model: formModel,
  });

  // 注册窗口
  const [registerModal, { setModalProps, openModal, closeModal }] = useModal();

  // 打开窗口
  async function open(isUpdate: boolean, record?: any) {
    isUpdateRef.value = isUpdate;
    // 更新则初始化表单
    if (isUpdate) {
      const detail = await menuApi.detail(record.id);
      Object.assign(formModel.value, detail);

      formModel.value = record;
    } else {
      resetFields();
    }

    const treeData = await menuApi.tree({});
    updateSchema({
      field: 'parentId',
      componentProps: { treeData },
    });

    // 打开窗口
    openModal();
  }

  async function handleSubmit() {
    try {
      const values = await validate();
      setModalProps({ confirmLoading: true });

      if (isUpdateRef.value) {
        await menuApi.update(formModel.value.id, values);
      } else {
        await menuApi.save(values);
      }

      closeModal();
      emit('success');
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>
